<template>
  <div class="ForumCategoryList">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="ForumCategoryListNotShow">
          <span class="iconfont icon-xiangzuo1"></span>
          <span class="title">添加板块</span>
        </div>
      </template>
    </top-title-bar>

    <div class="main">
      <div class="leftNav">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            class="btn"
            :title="item.title"
            v-for="item in ForumCategory"
            :key="item.id"
            @click="btnToggleFun(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="rightContent" v-if="ForumCategoryList">
        <div class="box" v-show="ForumCategoryListFlag">
          <div
            class="item"
            v-for="item in ForumCategoryList"
            :key="item.categoryID"
            @click="$router.push('/PostView?cat_id=' + item.categoryID)"
          >
            <div class="icon">
              <van-image :src="item.icon" @error="errorEventImg">
                <template v-slot:error>加载失败</template>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
            <div class="name-hot-total">
              <div class="name">{{ item.title }}</div>
              <div class="hot-total">
                <div class="hot">
                  热度 <span>{{ item.viewCountFormated }}</span>
                </div>
                <div class="total">
                  话题 <span>{{ item.postCountFormated }}</span>
                </div>
              </div>
            </div>
            <div
              class="cancal"
              v-show="item.isSubscribe"
              @click.stop="cancalFocusFun(item.categoryID)"
            >
              取消
            </div>
            <div
              class="focus"
              v-show="!item.isSubscribe"
              @click.stop="FocusFun(item.categoryID)"
            >
              关注
            </div>
          </div>
        </div>
        <div class="loading" v-show="!ForumCategoryListFlag">
          <van-loading class="load" size="24px" color="#0094ff" vertical
            >加载中...</van-loading
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopTitleBar from "../components/TopTitleBar.vue";
import {
  getForumCategory,
  getForumCategoryList,
  setCategoryUnsubscibe,
  setCategorySubscibe,
} from "../assets/api/community.js";
export default {
  data() {
    return {
      ForumCategoryListFlag: false,
      ForumCategory: null,
      ForumCategoryList: null,
      activeKey: 0, //默认选择角色扮演
      id: 4, //默认是角色扮演的id
    };
  },
  methods: {
    dataInit() {
      this.ForumCategoryInit();
      this.ForumCategoryListInit();
    },

    ForumCategoryInit() {
      getForumCategory().then((data) => {
        this.ForumCategory = data.categoryforum;
        console.log("拿到分类数据", this.ForumCategory);
      });
    },

    ForumCategoryListInit() {
      getForumCategoryList({ fum_id: this.id }).then((data) => {
        this.ForumCategoryList = data.categories;
        console.log("传入id拿到分类列表数据", this.ForumCategoryList);
        this.ForumCategoryListFlag = true;
      });
    },

    // 隐藏组件方法 调用社区路由中的方法
    ForumCategoryListNotShow() {
      console.log("[添加板块] go=> [社区]");
      this.$emit("forum-category-list-not-show");
    },

    // 图片加载失败
    errorEventImg() {
      console.log("有图片加载失败");
    },

    // 侧栏按钮列表下标改变事件
    btnToggleFun(id) {
      if (id == this.id) return;
      this.ForumCategoryListFlag = false;
      console.log("id切换成 =>", id);
      this.id = id;
      getForumCategoryList({ fum_id: id }).then((data) => {
        this.ForumCategoryList = data.categories;
        console.log("传入id拿到分类列表数据 切换=>", this.ForumCategoryList);
        this.ForumCategoryListFlag = true;
      });
    },

    // 取消关注
    cancalFocusFun(id) {
      setCategoryUnsubscibe({ cat_ids: id }).then((data) => {
        if (data.status == 1) {
          this.$toast("取消成功");
          let index = this.ForumCategoryList.findIndex(
            (item) => item.categoryID == id
          );
          this.ForumCategoryList[index].isSubscribe = 0;
          // 调用方法传参id给路由视图
          this.$emit("update-view", { id, val: 0 });
        }
      });
    },

    // 关注
    FocusFun(id) {
      setCategorySubscibe({ cat_ids: id }).then((data) => {
        if (data.status == 1) {
          this.$toast("关注成功");
          let index = this.ForumCategoryList.findIndex(
            (item) => item.categoryID == id
          );
          this.ForumCategoryList[index].isSubscribe = 1;
          // 调用方法传参id给路由视图
          this.$emit("update-view", { id, val: 1 });
        }
      });
    },
  },
  created() {
    this.dataInit();
  },
  components: { TopTitleBar },
};
</script>

<style lang="scss" scoped>
.ForumCategoryList {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 12;

  min-width: 320px;
  max-width: 750px;

  background-color: #fff;
  .TopTitleBar {
    .left {
      display: flex;
      align-items: center;
      .icon-xiangzuo1 {
        // font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
      .title {
        padding-left: 5px;
      }
    }
  }

  .main {
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;

    .leftNav {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 80px;
      background-color: #eff3f8;
      .btn {
        color: #646464;
        &.van-sidebar-item--select {
          color: #0cc85c;
          &::before {
            background-color: #0cc85c;
            border-radius: 2px;
          }
        }
      }
    }

    .rightContent {
      position: absolute;
      left: 80px;
      right: 0;
      top: 0;
      bottom: 0;
      padding: 0 12px;
      box-sizing: border-box;
      overflow-y: scroll;
      &::-webkit-scrollbar,
      &::-webkit-scrollbar-thumb {
        width: 0;
        height: 0;
      }

      .box {
        margin-top: 12px;
      }

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 45px;
        white-space: nowrap;
        border-radius: 5px;
        padding-left: 5px;
        border: 1px solid #f0f0f0;
        margin-bottom: 17px;

        &:active {
          opacity: 0.9;
          box-shadow: 0 0 45px 0 inset rgba($color: #000000, $alpha: 0.2);
        }

        .icon {
          width: 36px;
          height: 36px;
          font-size: 12px;
          position: relative;

          .van-image {
            width: 45px;
            height: 45px;
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: -10px;
            left: 0;
          }
        }
        .name-hot-total {
          width: calc(100% - 110px);
          height: 36px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .name {
            color: #323232;
            font-size: 15px;
          }

          .hot-total {
            display: flex;
            font-size: 12px;
            color: #989898;
            span {
              color: #efbc09;
            }
            .hot {
              margin-right: 18px;
            }
          }
        }
        .cancal,
        .focus {
          width: 45px;
          height: 45px;
          border-left: 1px solid #f0f0f0;
          color: #969696;
          text-align: center;
          line-height: 45px;
          font-size: 15px;

          &:active {
            opacity: 0.9;
            box-shadow: 0 0 45px 0 inset rgba($color: #000000, $alpha: 0.2);
          }

          &.focus {
            color: #efbc09;
          }
        }
      }

      .loading {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;

        .load {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0;
          height: max-content;
          width: max-content;
          margin: auto;
          transform: scale(1.2);
        }
      }
    }
  }
}
</style>